﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="/scripts/jquery.tmpl.js"></script>
    <script src="/scripts/knockout-1.2.0.js"></script>
</head>
<body>
<div class="liveExample">
   
<h2>Planets</h2>
<p>
	<label>
		<input type="checkbox" data-bind="checked: displayAdvancedOptions">
		Display advanced options
	</label>	
</p>

<p style="display: none;" data-bind="fadeVisible: displayAdvancedOptions">
    Show: 
    <label><input name="ko_unique_1" value="all" type="radio" data-bind="checked: typeToShow">All</label>
    <label><input name="ko_unique_2" value="rock" type="radio" data-bind="checked: typeToShow">Rocky planets</label>
    <label><input name="ko_unique_3" value="gasgiant" type="radio" data-bind="checked: typeToShow">Gas giants</label>
</p>

<div data-bind='template: { name: "planetsTemplate",   foreach: planetsToShow
    , beforeRemove: function(elem) { $(elem).slideUp() }
    , afterAdd: function(elem) { $(elem).hide().slideDown() } }'>
       </div>

<script id="planetsTemplate" type="text/html">
    <div class='planet ${ type }'>${ name }</div>
</script>

<p style="display: none;" data-bind="fadeVisible: displayAdvancedOptions">
    <button data-bind='click: function() { addPlanet("rock") }'>Add rocky planet</button>
    <button data-bind='click: function() { addPlanet("gasgiant") }'>Add gas giant</button>
</p>

<script type="text/javascript">
/*<![CDATA[*/
    var viewModel = {
        planets: ko.observableArray([
            { name: "Mercury", type: "rock" },
            { name: "Venus", type: "rock" },
            { name: "Earth", type: "rock" },
            { name: "Mars", type: "rock" },
            { name: "Jupiter", type: "gasgiant" },
            { name: "Saturn", type: "gasgiant" },
            { name: "Uranus", type: "gasgiant" },
            { name: "Neptune", type: "gasgiant" },
            { name: "Pluto", type: "rock" }
        ]),
        typeToShow: ko.observable("all"),
        displayAdvancedOptions: ko.observable(false),

        addPlanet: function (type) { this.planets.push({ name: "New planet", type: type }); }
    };

    viewModel.planetsToShow = ko.dependentObservable(function () {    	
        // Represents a filtered list of planets
        // i.e., only those matching the "typeToShow" condition
        var desiredType = this.typeToShow();
        if (desiredType == "all")
        	return this.planets();
        return ko.utils.arrayFilter(this.planets(), function(planet) {
        	return planet.type == desiredType;
        });
    }.bind(viewModel));

    // Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
    // Could be stored in a separate utility library
    ko.bindingHandlers.fadeVisible = {
        init: function (element, valueAccessor) {
            // Initially set the element to be instantly visible/hidden depending on the value
            var value = valueAccessor();
            $(element).toggle(ko.utils.unwrapObservable(value)); // Use "unwrapObservable" so we can handle values that may or may not be observable
        },
        update: function (element, valueAccessor) {
            // Whenever the value subsequently changes, slowly fade the element in or out
            var value = valueAccessor();
            ko.utils.unwrapObservable(value) ? $(element).fadeIn() : $(element).fadeOut();
        }
    };

    ko.applyBindings(viewModel);
/*]]>*/
</script>
</div>
</body>
</html>
